const result = document.getElementById('result');
// 绑定键盘按下事件
window.onkeydown = function () {
  // 1.创建对象
  const xhr = new XMLHttpRequest();

  // 设置响应体数据的类型（自动转换）
  xhr.responseType = 'json';

  // 2.设置请求的方法和url
  // 路径传参
  xhr.open('GET', 'http://127.0.0.1:8000/json-server');


  // 设置请求头
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  // 3.发送
  xhr.send('a=100&b=200');
  // xhr.send('a:100&b:200');

  // 4.事件绑定，处理服务端返回的结果
  // on when 当...时候
  // todo readystate 是 xhr 对象的属性，表示状态 0初始化 1open方法调用完毕 2send方法已经调用完毕 3服务端返回的部分结果 4服务端返回所有的结果
  // change 改变 
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      //判断响应状态码 200 404 403  500
      //2xx 成功
      if (xhr.status >= 200 && xhr.status < 300) {
        // 处理结果 行 头 空行 体
        // 1.响应行
        // console.log(xhr.status); //状态码
        // console.log(xhr.statusText); //状态字符串
        // console.log(xhr.getAllResponseHeaders()); //所有响应头
        // console.log(xhr.response); //响应体

        // 设置result文本
        // result.innerHTML = xhr.response;

        // 手动对数据转化
        // let data = JSON.parse(xhr.response);
        // result.innerHTML = data.name;

        // 自动对数据转化
        // console.log(xhr.response);
        result.innerHTML = xhr.response.name;
      } else {

      }
    }
  }
}
